<template>
  <div class="home">
    <!-- 面包屑 -->
    <mbx name1="商品管理" name2="商品列表"></mbx>
    <!-- 卡片区 -->
    <el-card class="mt16">
      <!-- Form -->
      <el-button type="primary" @click="dialogFormVisible = true"
        >添加</el-button
      >
      <el-dialog
        width="30%"
        title="添加用户"
        v-model="dialogFormVisible"
        @open="getlist"
        @close="qk"
      >
        <el-form :model="form" :rules="rules" ref="add">
          <el-form-item
            label="分类名称"
            :label-width="formLabelWidth"
            prop="cat_name"
          >
            <el-input v-model="form.cat_name"></el-input>
          </el-form-item>
          <el-form-item label="父类" :label-width="formLabelWidth">
            <el-cascader
              width="350"
              ref="liandong"
              :options="user"
              @change="sel"
              :props="{
                value: 'cat_id',
                label: 'cat_name',
                checkStrictly: true,
                expandTrigger: 'hover',
              }"
            ></el-cascader>
          </el-form-item>
        </el-form>
        <div slot="#footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="addgoods">确 定</el-button>
        </div> </el-dialog
      ><br /><br />
      <el-table
        :data="user"
        border
        style="width: 100%"
        row-key="cat_id"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      >
        <el-table-column type="index" label="#">
          <template #default="scope">
            {{ scope.row.index }}
          </template>
        </el-table-column>
        <el-table-column prop="cat_name" label="分类名称"> </el-table-column>
        <el-table-column prop="cat_deleted" label="显示状态">
          <template #default="scope">
            <el-icon
              style="color: #00cc00"
              v-show="scope.row.cat_deleted == false"
              ><success-filled
            /></el-icon>
            <el-icon
              style="color: #ff0000"
              v-show="scope.row.cat_deleted == true"
              ><CircleCloseFilled
            /></el-icon>
          </template>
        </el-table-column>
        <el-table-column prop="cat_level" label="分类层级">
          <template #default="scope">
            <el-tag v-show="scope.row.cat_level == 0">等级一</el-tag>
            <el-tag type="success" v-show="scope.row.cat_level == 1"
              >等级二</el-tag
            >
            <el-tag type="warning" v-show="scope.row.cat_level == 2"
              >等级三</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作">
          <template #default="scope">
            <el-button
              @click="edit(scope.row)"
              type="primary"
              size="small"
              :icon="Edit"
              >编辑</el-button
            >
            <el-button
              type="danger"
              size="small"
              :icon="Delete"
              @click="del(scope.row.cat_id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 表格 -->
      <!-- 编辑的模态框 -->
      <el-dialog
        title="编辑用户"
        v-model="dialogFormVisible1"
        @close="qk"
        width="30%"
      >
        <el-form :model="form1" :rules="rules" ref="edadd">
          <el-form-item
            label="分类名称"
            :label-width="formLabelWidth"
            prop="cat_name"
          >
            <el-input v-model="form1.cat_name" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible1 = false">取 消</el-button>
          <el-button type="primary" @click="xg">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 编辑的模态框 -->
    </el-card>
  </div>
</template>

<script>
import { toRefs, reactive, onMounted, ref } from "vue";
import {
  Search,
  Edit,
  Delete,
  SuccessFilled,
  CircleCloseFilled,
} from "@element-plus/icons-vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { getcate, addcate, editlist, dellist } from "../http/api.js";
export default {
  setup(props) {
    const liandong = ref(null);
    const add = ref(null);
    const edadd = ref(null);
    const obj = reactive({
      dialogFormVisible: false,
      dialogFormVisible1: false,
      shuju: {
        pagenum: 1,
        pagesize: 4,
      },
      count: 0,
      form: {
        cat_name: "",
        cat_pid: 0,
        cat_level: 0,
      },
      form1: {
        cat_name: "",
        cat_id: 0,
      },
      rules: {
        cat_name: [{ required: true, message: "请输入名称", trigger: "blur" }],
      },
      user: [],
      formLabelWidth: "80px",
    });
    // 挂载
    onMounted(() => {
      getlist();
    });
    // 渲染数据
    const getlist = async () => {
      const res = await getcate();
      console.log("分类列表", res);
      obj.user = res;
      console.log("user", obj.user);
      obj.user.forEach((item, index) => {
        item.index = index + 1;
        console.log(item);
      });
      console.log("jiaindex", obj.user);
    };
    // 监听三级联动框的变化
    const sel = (data) => {
      console.log("这是分类页面的三级联动", data);
      obj.form.cat_pid = data[data.length - 1];
      obj.form.cat_level = data.length;
      liandong.dropDownVisible = false;
    };
    // 添加
    const addgoods = () => {
      add.value.validate(async (valid) => {
        if (valid) {
          const res = await addcate(obj.form);
          console.log("添加的分类", res);
          obj.dialogFormVisible = false;
          getlist();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    };
    // 清空输入框的内容
    const qk = () => {
      obj.form = {
        cat_pid: 0, //父类父ID
        cat_name: "", //分类名称
        cat_level: 0, //分类层级
      };
    };
    // 编辑
    const edit = (row) => {
      console.log("这是数据回填", row);
      obj.dialogFormVisible1 = true;
      obj.form1.cat_name = row.cat_name;
      obj.form1.cat_id = row.cat_id;
      console.log(obj.form1);
    };
    // 修改
    const xg = () => {
      edadd.value.validate(async (valid) => {
        if (valid) {
          const res = await editlist(obj.form1.cat_id, obj.form1.cat_name);
          console.log(res);
          getlist();
          obj.dialogFormVisible1 = false;
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    };
    // 删除
    const del = (id) => {
      ElMessageBox.confirm("您确定要删除它吗?", "Warning", {
        confirmButtonText: "OK",
        cancelButtonText: "Cancel",
        type: "warning",
      })
        .then(async () => {
          const res = await dellist(id);
          console.log("删除", res);
          getlist();
        })
        .catch(() => {
          ElMessage({
            type: "info",
            message: "Delete canceled",
          });
        });
    };

    return {
      ...toRefs(obj),
      liandong,
      sel,
      add,
      addgoods,
      qk,
      edit,
      xg,
      edadd,
      del,
      Edit,
      Delete,
      SuccessFilled,
      CircleCloseFilled,
    };
  },
};
</script>
<style>
.el-radio {
  position: absolute;
  width: 100%;
}
.el-radio__inner {
  display: none;
}
.el-input {
  width: 300px;
}
.dialog-footer {
  display: flex;
  justify-content: flex-end;
}
</style>

<style lang="scss" scoped>
.home {
  width: 100%;
}
</style>
